<template>
  <view class="dialog">
    <view class="card">
      <view class="card-title">
        <text>视力复查填写</text>
        <image
          class="ic-close"
          src="../static/ic_close2.png"
          @click="emits('close')"
        >
        </image>
      </view>
      <view class="card-row">
        <view class="key"> 复查时间 </view>
        <picker
          mode="date"
          :value="reviewDate"
          :start="startDate"
          :end="endDate"
          class="value"
          @change="reviewDateChange"
        >
          <view class="pick-value" :class="{ 'has-value': reviewDate }">{{
            reviewDate || "请选择"
          }}</view>
        </picker>
      </view>
      <view class="card-divider"></view>
      <view class="card-row">
        <view class="key"> </view>
        <view class="value">左眼(OS)</view>
        <view class="value">右眼(OD)</view>
      </view>
      <view class="card-divider"></view>
      <view class="card-row">
        <view class="key"> 球镜 </view>
        <input class="value" v-model="Lsph" placeholder="例如：-12.00" />
        <input class="value" v-model="Rsph" placeholder="例如：-12.00" />
      </view>
      <view class="card-divider"></view>
      <view class="card-row">
        <view class="key"> 柱镜 </view>
        <input class="value" v-model="Lcyl" placeholder="例如：-12.00" />
        <input class="value" v-model="Rcyl" placeholder="例如：-12.00" />
      </view>
      <view class="card-divider"></view>
      <view class="card-row">
        <view class="key"> 上传验配单 </view>
        <image class="ic-upload" src="../static/ic_upload.png"></image>
      </view>
      <view class="add-image" v-if="fittingFile" @click="chooseFittingFile">
        <image
          class="show-image"
          mode="heightFix"
          :src="fittingFileBase64"
        ></image>
      </view>
      <view class="add-image" v-else @click="chooseFittingFile">
        <image class="ic-close" src="../static/ic_add.png"></image>
      </view>
      <view class="submit" @click="submit">提交</view>
    </view>
  </view>
</template>
<script setup>
import { ref, computed, watch } from "vue";
import { urlTobase64 } from "../pages/common/utils";
const props = defineProps({
  edit: Object,
});
const emits = defineEmits(["close", "submit"]);
function getDate(type) {
  const date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();

  if (type === "start") {
    year = year - 60;
  } else if (type === "end") {
    year = year + 2;
  }
  month = month > 9 ? month : "0" + month;
  day = day > 9 ? day : "0" + day;
  return `${year}-${month}-${day}`;
}
const VhId = ref(props.edit.VhId || "");
const reviewDate = ref(props.edit.FittingDate || getDate());
const startDate = ref(getDate("start"));
const endDate = ref(getDate("end"));
const Lsph = ref(props.edit.Lsph || "");
const Rsph = ref(props.edit.Rsph || "");
const Lcyl = ref(props.edit.Lcyl || "");
const Rcyl = ref(props.edit.Rcyl || "");
const fittingFile = ref("");
const fittingFileName = ref(props.edit.FittingFileName || "");
const fittingFileBase64 = computed(() => {
  if (fittingFile.value.startsWith("http")) {
    return fittingFile.value;
  }
  return `data:image/jpeg;base64,${fittingFile.value}`;
});
if (props.edit.FittingByte) {
  urlTobase64(props.edit.FittingByte).then((base64) => {
    fittingFile.value = base64;
  });
}
watch(
  () => props.edit,
  (newVal) => {
    VhId.value = newVal.VhId;
    reviewDate.value = newVal.FittingDate;
    Lsph.value = newVal.Lsph;
    Rsph.value = newVal.Rsph;
    Lcyl.value = newVal.Lcyl;
    Rcyl.value = newVal.Rcyl;
    fittingFileName.value = newVal.FittingFileName;
    urlTobase64(newVal.FittingByte).then((base64) => {
      fittingFile.value = base64;
    });
  }
);

function reviewDateChange(e) {
  reviewDate.value = e.detail.value;
}
function chooseFittingFile() {
  uni.chooseImage({
    count: 1,
    success: (ret) => {
      console.log("chooseImage", ret);
      const { tempFiles } = ret;
      if (tempFiles.length > 0) {
        uni.getFileSystemManager().readFile({
          filePath: tempFiles[0].path,
          encoding: "base64",
          success: (ret) => {
            // console.log('read file', ret)
            fittingFile.value = ret.data;
            const paths = tempFiles[0].path.split("/");
            fittingFileName.value = paths[paths.length - 1];
          },
          fail: (err) => {
            console.error(err);
          },
        });
      }
    },
    fail: (e) => {
      console.error("chooseImage", e);
      uni.showToast({
        title: "选择图片失败",
        icon: "none",
      });
    },
  });
}
function submit() {
  emits("submit", {
    VhId: VhId.value,
    FittingDate: reviewDate.value,
    Lsph: Lsph.value,
    Rsph: Rsph.value,
    Lcyl: Lcyl.value,
    Rcyl: Rcyl.value,
    FittingFileName: fittingFileName.value,
    FittingByte: fittingFile.value,
  });
}
</script>
<style lang="scss" scoped>
.dialog {
  background-color: white;
  border-radius: 30rpx;
  // height: 200rpx;
  width: calc(100vw - 70rpx);
  overflow: hidden;
  .card {
    display: flex;
    // align-items: center;
    flex-direction: column;
    .card-title {
      font-size: 35rpx;
      padding: 20rpx 0;
      font-family: "yshst" !important;
      background: #9fdaff;
      color: #000;
      text-align: center;
      position: relative;
      .ic-close {
        width: 40rpx;
        height: 40rpx;
        position: absolute;
        right: 40rpx;
        top: 20rpx;
        padding: 8rpx;
        box-sizing: border-box;
      }
    }
    .card-row {
      display: flex;
      align-items: center;
      padding: 20rpx 30rpx;
      .key {
        font-size: 30rpx;
        width: 150rpx;
        // text-align: center;
        color: black;
      }
      .value {
        flex: 1;
        font-size: 30rpx;
        padding: 0 20rpx;
        color: black;
      }
      .ic-upload {
        width: 40rpx;
        height: 40rpx;
      }
    }
    .card-divider {
      height: 2rpx;
      background: #e4f2fa;
      margin: 0 30rpx;
    }
    .add-image {
      background: #eff8ff;
      border-radius: 30rpx;
      height: 300rpx;
      position: relative;
      margin: 0 30rpx;
      .ic-close {
        width: 40rpx;
        height: 40rpx;
        position: absolute;
        margin: auto;
        inset: 0;
      }
      .show-image {
        height: 100%;
        position: absolute;
        margin: auto;
        inset: 0;
      }
    }
    .submit {
      background: #9fdaff;
      color: black;
      font-size: 35rpx;
      text-align: center;
      padding: 13rpx 0;
      border-radius: 100rpx;
      width: 400rpx;
      align-self: center;
      margin: 30rpx 0;
    }
  }
}
</style>